<template>
  <div id="max">
    <el-card class="card">
      <el-button class="classification" icon="el-icon-user-solid" style="color: black;font-weight: bold;font-size: 20px"
                 type="text">
        个人中心
      </el-button>
      <p>Preserved博客,个人中心频道, 主要用户信息，文章管理等。</p>
    </el-card>
    <el-card class="card">
      <div style="text-align: right">
        <el-button v-if="button_login" icon="el-icon-user" type="primary" @click="$router.push('/login')">请登录
        </el-button>
      </div>
      <el-divider></el-divider>
      <div>
        <div class="block">
          <el-upload
              :action="axisurl+'user/UpUserImg'"
              :data="userdata"
              :on-success="successImg"
              :show-file-list="false"
          >
            <div class="avatar">
              <el-avatar :size="100" :src="circleUrl"></el-avatar>
            </div>
          </el-upload>
          <div class="userInformation">
            <el-descriptions :column="3" border class="margin-top" title="用户信息">
              <template #extra>
                <el-dropdown>
                  <el-button size="small" type="primary">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="centerDialogVisible=true">修改信息
                      </el-dropdown-item>
                      <el-dropdown-item @click="$router.push('/changePhone')">改绑手机号
                      </el-dropdown-item>
                      <el-dropdown-item @click="$router.push('/retrieve')">修改密码
                      </el-dropdown-item>
                      <el-dropdown-item @click="GoBackstage">后台管理</el-dropdown-item>
                      <el-dropdown-item v-if="button_out" @click="login_out">退出登录
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
              <el-descriptions-item>
                <template #label>
                  <i class="el-icon-user"></i>
                  用户名
                </template>
                {{ userdata.userName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <i class="el-icon-mobile-phone"></i>
                  手机号
                </template>
                {{ userdata.userPhone }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <i class="el-icon-location-outline"></i>
                  邮箱
                </template>
                {{ userdata.userEmail }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <i class="el-icon-tickets"></i>
                  备注
                </template>
                <el-tag size="small">{{ userdata.userJurisdiction }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <i class="el-icon-office-building"></i>
                  注册时间
                </template>
                {{ userdata.userRegistrationTime }}
              </el-descriptions-item>
            </el-descriptions>

            <el-dialog
                v-model="centerDialogVisible"
                center
                destroy-on-close="true"
                title="修改信息"
                top="300px"
                width="30%">
              <div>
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="100px"
                         status-icon>
                  <el-form-item label="用户名" prop="userName">
                    <el-input v-model="ruleForm.userName" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="userEmail">
                    <el-input v-model="ruleForm.userEmail" autocomplete="off"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <template #footer>
             <span class="dialog-footer">
               <el-button @click="centerDialogVisible = false">取 消</el-button>
               <el-button type="primary" @click="UpData">更 新</el-button>
             </span>
              </template>
            </el-dialog>
          </div>
        </div>
      </div>
      <el-divider></el-divider>

      <div>
        <h4>我发布的文章</h4>
        <el-collapse v-model="activeNames" accordion="true" @change="handleChange">
          <el-empty v-if="empty" description="暂无文章，快来发表第一篇热门文章吧！"></el-empty>
          <el-collapse-item v-for="(item,index) in Articledata" :key="index" :name="index">
            <template #title>
              {{ item.articleTitle }}<i class="el-icon-document"></i>
              <div class="rightArtile">{{ item.articleDate }}</div>
              <div class="rightArtileBut">
                <el-button circle icon="el-icon-edit"
                           size="mini" type="primary"
                           @click="$router.push({path:'/blog/create/',query:{id:item.articleId}})"></el-button>
              </div>
              <div class="rightArtileButs">
                <el-button circle icon="el-icon-delete" size="mini" type="danger"
                           @click="deleteByid(item.articleId)"></el-button>
              </div>
            </template>
            <div v-html="item.articleAbstract"></div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Personal",
  data() {
    return {
      empty: false,
      activeNames: '1',
      axisurl: this.$axios.defaults.baseURL,
      ruleForm: {},
      centerDialogVisible: false,
      fits: ['fill'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      button_out: false,
      button_login: false,
      userdata: '',
      token: '',
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      Articledata: '',
    }
  },
  mounted() {
    window.scrollTo(0, 0);
    this.getuser();
  },
  methods: {
    getuser() {
      this.token = localStorage.getItem("token");
      if (this.token != null) {
        this.button_out = true;
        this.$axios.post("/user/getuser", {userToken: this.token}).then((res) => {
          if (res.data.success) {
            this.userdata = res.data.data;
            this.ruleForm.userId=this.userdata.userId;
            this.ruleForm.userName=this.userdata.userName;
            this.ruleForm.userEmail=this.userdata.userEmail;
            this.GetUserArticle();
            if (this.userdata.userProfilePhoto != null) {
              this.circleUrl = this.userdata.userProfilePhoto;
            }
          } else {
            this.$notify({
              title: '警告',
              message: res.data.message,
              type: 'warning'
            });
            this.button_login = true;
          }
        })
      } else {
        this.button_login = true;
        this.button_out = false;
      }
    },
    login_out() {
      this.$cookies.remove("userPhone");
      this.$cookies.remove("userPassword");
      localStorage.removeItem('token');
      location.reload()
    },
    UpData() {
      this.$axios.post('user/UpDataUser', this.ruleForm).then((res) => {
        if (res.data.success) {
          this.centerDialogVisible = false;
          this.$message.success(res.data.message);
          this.getuser();
        } else {
          this.$message.warning(res.data.message);
        }
      })
    },
    successImg(req) {
      if (req.success) {
        this.$router.go(0);
        this.$notify({
          title: '成功',
          message: req.message,
          type: 'success'
        });
      }
    },
    GetUserArticle() {
      this.$axios.post('articles/getArticlesByName', this.userdata).then((res) => {
        if (res.data.success) {
          this.Articledata = res.data.data;
        } else {
          this.empty = true;
        }
      })
    },
    GoBackstage() {
      if (this.userdata.userJurisdiction === '管理员') {
        this.$router.push('/blog/backstage')
      } else {
        this.$message.warning({
          message: '没有权限使用后台管理，如需请联系管理员',
          type: 'warning'
        });
      }
    },
    deleteByid(id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('articles/deleteByid', {articleId: id}).then((res) => {
          if (res.data.success) {
            this.$notify({
              title: '成功',
              message: res.data.message,
              type: 'success'
            });
            this.GetUserArticle();
          } else {
            this.$notify.error({
              title: '错误',
              message: res.data.message,
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style scoped>
.card {
  margin: 10px;
  border-radius: 10px;
}

.block {
  display: flex;
}

.avatar {
  margin-top: 30px;
  padding-right: 20px;
}

.userInformation {
  width: 100%;
}

.rightArtile {
  position: absolute;
  right: 165px;
}

.rightArtileBut {
  position: absolute;
  right: 100px;
}

.rightArtileButs {
  position: absolute;
  right: 60px;
}
</style>